<template>
  <div class="building-container">
    楼宇管理
    <el-button
      v-auth-btn="'park:building:add_edit'"
      type="primary"
      @click="addBuilding"
    >添加楼宇</el-button>
    <!-- 添加楼宇 -->
    <el-dialog title="添加楼宇" :visible.sync="dialogVisible" width="580px">
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" type="default" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Building',
  data() {
    return {
      addForm: {},
      addFormRules: {},
      dialogVisible: false
    }
  },
  methods: {
    addBuilding() {
      this.dialogVisible = true
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
